/* ----------------------头部导航栏样式-------------------------- */
.top {
  height: 70px;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  background: #242424;
}

.top .topbar {
  display: flex;
  justify-content: space-between;
  height: 69px;
  line-height: 69px;
}

/* --topbar左侧-- */
.top .bar-left {
  display: flex;
}

.top .bar-left .logo {
  background: url(../img/music_sprite01.png);
}

.top .bar-left .logo a {
  display: block;
  padding-right: 20px;
  width: 157px;
  text-indent: -9999px;
}

.topbar .bar-left .list {
  display: flex;
}

.topbar .bar-left .list .item {
  position: relative;
  display: inline-block;
  padding: 0 19px;
  font-size: 14px;
  color: #ccc;
}

.topbar .bar-left .list .item:hover,
.topbar .bar-left .list .active {
  color: #fff;
  background-color: #000;
}

.topbar .bar-left .list .active::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 6px;
  background: url(../img/music_sprite01.png) no-repeat -226px 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -1px;
}

.topbar .bar-left .list .icon-hot::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 19px;
  background: url(../img/music_sprite01.png) no-repeat -190px 0;
  top: 21px;
  left: 100px;
}

/* --topbar右侧-- */
.top .topbar .bar-right {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.top .topbar .search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* line-height: 32px; */
  /* text-align: center; */
  width: 158px;
  height: 32px;
  box-sizing: border-box;
  padding-right: 10px;
  border-radius: 30px;
  background: #fff url(../img/music_sprite01.png) no-repeat 0 -99px;
}

.top .topbar .search input {
  width: 115px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  color: #9b9b9b;
}

.top .topbar .anthor a {
  display: inline-block;
  width: 90px;
  height: 32px;
  margin: 0 23px;
  line-height: 32px;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #4f4f4f;
  border-radius: 20px;
  color: #ccc;
}

.top .topbar .anthor a:hover {
  color: #fff;
  border: 1px solid #ccc;
}

.top .topbar .bar-right .login a {
  color: #787878;
}

.top .topbar .bar-right .login:hover a {
  color: #aaa;
}

.top .topbar .bar-right .login a:hover {
  color: #787878;
  text-decoration: underline;
}
/* ----------------------nav样式-------------------------- */
.nav {
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  border-bottom:  1px solid #a40011;
  background-color: #C20C0C;
}

.nav .navbar {
  box-sizing: border-box;
  padding-left: 180px;
}

.nav .navbar .list {
  display: flex;
}

.nav  .list .item {
  display: inline-block;
}

.nav  .list .item span {
  display: inline-block;
  padding: 0 13px;
  margin: 7px 17px 0;
  height: 20px;
  line-height: 21px;
  border-radius: 20px;
  color: #fff;
}

.nav  .list .item .active,
.nav  .list .item:hover span {
  background-color: #9b0909;
}

/* ----------------------轮播图区域-------------------------- */
/* 左侧区域 */
/* --轮播图图片-- */
.banner {
  height: 285px;
  background: url(../img/banner_bg01.jpg) center center / 6000px;

}

.banner .area {
  position: relative;
  height: 285px;
}

.banner .area .area-left {
  position: relative;
  width: 730px;
}

.banner .area .img-list {
  display: flex;
  overflow: hidden;
}

.banner .area .img-list li {
  flex-shrink: 0;
  width: 100%;
}

.banner .area .img-list .item {
  display: block;
}

.banner .area .img-list .item img {
  width: 100%;
  height: 285px;
}

/* --轮播图指示器-- */
.banner .area .dost-list {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  /* margin: 0 auto; */
  display: flex;
  justify-content: center;
}

.banner .area .dost-list li {
  margin: 0 2px;
}

.banner .area .dost-list .item {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: skyblue;
  background: url(..//img/banner_sprite.png) no-repeat 3px  -343px;
}

.banner .area .dost-list .item.active,
.banner .area .dost-list .item:hover {
  background-position: -16px -343px;
}

/* --右侧区域-- */
.banner .area-right {
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 254px;
  background: url(../img/download_sprite.png) no-repeat;
}

.banner .area-right .download {
  display: block;
  width: 215px;
  height: 56px;
  margin: 186px 0 0 19px;
  text-indent: -9999px;
}

.banner .area-right .download:hover {
  background: url(../img/download_sprite.png) no-repeat 0 -290px;
}

.banner .area-right p {
  margin: 10px 0;
  font-size: 12px;
  text-align: center;
  color: #8d8d8d;
}

/* --banner两侧区域控制按钮-- */
.banner .area .control {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 37px;
  height: 63px;
  margin: auto 0;
  background: url(../img/banner_sprite.png) no-repeat;
}

.banner .area .control-left {
  left: -70px;
  background-position: 0 -360px;
}

.banner .area .control-left:hover {
  background-position: 0 -430px;
}

.banner .area .control-right {
  right: -70px;
  background-position: 0 -508px;
}

.banner .area .control-right:hover {
  background-position: 0 -578px;
}

/* ----------------------主要区域-------------------------- */
.main .main-area {
  display: flex;
  justify-content: space-between;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  background: url(../img/main_bg.png);
}

/* --主要内容 左侧区域-- */
.main .main-area .main-left {
  padding: 20px 20px 40px;
  width: 729px;
}

/* 左侧区域 热门推荐 */
.main .recommend-section .list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}
.main .recommend-section .item {
  position: relative;
  margin-bottom: 30px;
  width: 140px;
  height: 204px;
}

.main .recommend-section .item .cover {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  background: url(../img/music_sprite02.png) no-repeat 0 0;
}

.main .recommend-section .recommend-top {
  position: relative;
}

.main .recommend-section .item .info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: 27px;
  color: #ccc;
  background: url(../img/music_sprite02.png) no-repeat 0 -537px;
}


.main .recommend-section .item .icon-music {
  display: inline-block;
  width: 14px;
  height: 11px;
  margin: 0 5px 0 10px;
  background: url(../img/play_sprite.png) no-repeat 0 -24px;
}

.main .recommend-section .item .icon-play{
  position: absolute;
  right: 10px;
  width: 16px;
  height: 17px;
  cursor: pointer;
  background: url(../img/play_sprite.png) no-repeat 0 0;
}

.main .recommend-section .item .icon-play:hover {
  background-position: 0 -60px;
}

.main .recommend-section .item .desc {
  display: inline-block;
  margin: 8px 0 3px;
  font-size: 14px;
}

.main .recommend-section .item .desc:hover {
  text-decoration: underline;
}

.main .recommend-section .desc .icon-radio {
  position: relative;
  display: inline-block;
  top: 2px;
  margin-right: 3px;
  width: 35px;
  height: 15px;
  background: url(../img/music_sprite03.png) no-repeat -31px -658px;
}

/* 左侧区域 新碟上架 */
.main .main-left .disc-section {
  margin-top: 30px;
}

.disc-section .content {
  height: 186px;
  margin: 20px 0 37px;
  box-sizing: border-box;
  border: 1px solid #d3d3d3;
}

.disc-section .content .inner {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: 25px 25px 7px;
  border: 1px solid #fff;
  background-color: #f5f5f5;
}

.disc-section .content .inner .roller {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.disc-section .inner .roller .list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

.disc-section .inner .roller .list .item {
  width: 118px;
  height: 150px;
  background: url(../img/main_sprite01.png) no-repeat -260px 100px;
}

.disc-section .inner .roller .list .item .album {
  position: relative;
}

.disc-section .inner .roller .list .item .cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../img/music_sprite02.png) no-repeat 0 -570px;
}

.disc-section .inner .roller .item .cover:hover + .play {
  display: block;
}

.disc-section .inner .roller .list .item .play {
  position: absolute;
  display: none;
  right: 24px;
  bottom: 7px;
  width: 22px;
  height: 22px;
  background: url(../img/play_sprite.png) no-repeat 0 -85px;
}

.disc-section .inner .roller .list .item a {
  display: block;
  margin-top: 3px;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.disc-section .inner .roller .list .item a:hover {
  text-decoration: underline;
}

.disc-section .inner .roller .list .item .title {
  margin-top: 5px;
  color: #000;
}

.disc-section .inner .roller .list .item .anchor {
  color: #666;
}

.disc-section .inner .control {
  position: absolute;
  bottom: 98px;
  width: 17px;
  height: 17px;
  cursor: pointer;
  background: url(../img/main_sprite01.png) no-repeat;
}

.disc-section .inner .control-left {
  left: 5px;
  background-position: -260px -75px;
}

.disc-section .inner .control-left:hover {
  background-position: -280px -75px;
}

.disc-section .inner .control-right {
  right: 5px;
  background-position: -300px -75px;
}

.disc-section .inner .control-right:hover {
  background-position: -320px -75px;
}

/* 左侧区域 榜单 */
.rank-section .bill {
  display: flex;
  height: 472px;
  margin-top: 20px;
  background: url(../img/rank_bg.png) no-repeat;
}

.rank-section .bill .rank {
  width: 230px;
}

.rank-section .bill .rank .header {
  display: flex;
  height: 120px;
  box-sizing: border-box;
  padding: 20px 0 0 20px;
}

.rank-section .rank .header .album {
  position: relative;
  width: 80px;
  height: 80px;
}

.rank-section .rank .header .album img{
  width: 100%;
  height: 100%;
}

.rank-section .rank .header .album .cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../img/music_sprite02.png) no-repeat -145px -57px;
}

.rank-section .rank .header .info {
  margin: 6px 0 0 10px;
}

.rank-section .rank .header .info .title {
  cursor: pointer;
  color: #333;
}

.rank-section .rank .header .info .title:hover {
  text-decoration: underline;
}

.rank-section .rank .header .operation {
  margin-top: 10px;
}

.rank-section .rank .header .operation .btn {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  background: url(../img/main_sprite01.png) no-repeat ;
}

.rank-section .rank .header .operation .btn-play {
  background-position: -267px -205px;
}

.rank-section .rank .header .operation .btn-play:hover {
  background-position: -267px -235px;
}

.rank-section .rank .header .operation .btn-favor {
  background-position: -300px -205px;
}

.rank-section .rank .header .operation .btn-favor:hover {
  background-position: -300px -235px;
}

.rank-section .rank .list .item {
  display: flex;
  height: 32px;
  margin-left: 12px;
  line-height: 32px;
}

.rank-section .rank .list .item .no {
  width: 35px;
  color: #666;
  font-size: 16px;
  text-align: center;
}

.rank-section .rank .list .item:nth-of-type(-n + 3) .no {
  color: #c10d0c;
}

.rank-section .rank .list .item .song {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.rank-section .rank .list .item .song:hover {
  text-decoration: underline;
}

.rank-section .rank .list .item .operation {
  display: none;
  justify-content: space-evenly;
  align-items: center;
  width: 82px;
}

.rank-section .rank .list .item:hover .operation {
  display: flex;
}

.rank-section .rank .list .item .btn {
  width: 17px;
  height: 17px;
  background: url(../img/main_sprite01.png) no-repeat;
}

.rank-section .rank .list .item .btn-play {
  background-position: -267px -268px;
}

.rank-section .rank .list .item .btn-play:hover {
  background-position: -267px -288px;
}

.rank-section .rank .list .item .btn-add {
  background: url(../img/music_sprite03.png) no-repeat 2px -698px;
}

.rank-section .rank .list .item .btn-add:hover {
  background: url(../img/music_sprite03.png) no-repeat -20px -698px;
}

.rank-section .rank .list .item .btn-favor {
  background-position: -297px -268px;
}

.rank-section .rank .list .item .btn-favor:hover {
  background-position: -297px -288px;
}

.rank-section .rank .list .more {
  height: 32px;
  margin-right: 32px;
  line-height: 32px;
  text-align: right;
}

.rank-section .rank .list .more  a:hover {
  text-decoration: underline;
}

/* --主要内容 右侧区域-- */
/* 右侧 登录区域 */
.main .main-right {
  width: 250px;
}

.main .main-right .user-login {
  width: 250px;
  height: 126px;
  background: url(../img/main_sprite01.png) no-repeat 0 0;
}

.main .main-right .user-login .desc {
  width: 205px;
  padding: 16px 0;
  margin: 0 auto;
  line-height: 22px;
  color: #666;
}

.main .main-right .user-login .btn {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  text-shadow: 0 1px 0 #8a060b;
  color: #fff;
  background: url(../img/main_sprite01.png) no-repeat 0 -195px;
}

.main .main-right .user-login .btn:hover {
  background-position: -110px -195px;
}

/* 右侧 入驻歌手区域 */
.main .main-right .seetle-singer {
  margin-top: 15px;
  padding: 0 20px;
}

.main .main-right .seetle-singer .list {
  margin: 6px 0 20px;
}

.main .seetle-singer .list .item {
  display: flex;
  margin-top: 15px;
  width: 210px;
  height: 62px;
}

.main .seetle-singer .list .item .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-left: 14px;
  border: 1px solid #e9e9e9;
  border-left: none;
  overflow: hidden;
}

.main .seetle-singer .list .item .info .singer{
  color: #333;
  font-size: 14px;
  font-weight: 700;
}

.main .seetle-singer .list .item .info .desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666;
  font-size: 12px;
}

/* 右侧 申请按钮区域 */
.main .main-right .apply-btn {
  padding: 0 20px;
}

.main .main-right .apply-btn .apply {
  display: block;
  box-sizing: border-box;
  padding-right: 5px;
  width: 210px;
  height: 31px;
  border-radius: 4px;
  text-align: center;
  line-height: 31px;
  color: #333;
  font-weight: 700;
  background: url(../img/btn_sprite01.png) no-repeat right -100px;
}

.main .main-right .apply-btn .apply:hover {
  background-position: right -182px;
}

.main .main-right .apply-btn .apply i {
  display: block;
  padding-left: 3px;
  height: 31px;
  background: url(../img/btn_sprite01.png) no-repeat 0 -59px;
}

.main .main-right .apply-btn .apply:hover i {
  background-position: 0 -141px;
}

/* 右侧 热门主播区域 */
.main .main-right .hot-anchor {
  margin-top: 30px;
  padding: 0 20px;
}

.main .hot-anchor .list {
  margin-top: 20px;
}

.main .hot-anchor .list .item {
  display: flex;
  margin-top: 10px;
}

.main .hot-anchor .list .item .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: 10px;
  color: #666;
  font-size: 12px;
}

.main .hot-anchor .list .item .info .name {
  color: #000;
}

.main .hot-anchor .list .item .info .name:hover {
  text-decoration: underline;
}

.main .hot-anchor .list .item .info .explain {
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ----------------------底部版权区域-------------------------- */
.end {
  /* background-color: #f5f5f5; */
  border: 1px solid #d3d3d3;
}

.end .wrapper_02 {
  display: flex;
}

.end .copy {
  width: 520px;
  padding-top: 20px;
}

.end .link {
  display: flex;
}

.end .link .line {
  margin: 0 4px;
  color: #c2c2c2;
}

.end .link .item {
  color: #999;
}

.end .link .item:hover {
  text-decoration: underline;
}

.end .right {
  color: #666;
  margin-top: 10px;
}

.end .right .span {
  padding-right: 5px;
}

.end .right .ccie {
  color: #666;
}

.end .right .ccie:hover {
  text-decoration: underline;
}

.end .right .police-logo {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
}

.end .right .police-logo img {
  position: relative;
  top: 2px;
  right: -2px;
  width: 14px;
}

.end .right .police-text {
  color: #666;
}

.end .right .police-text:hover {
  text-decoration: underline;
}

.end .enter {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  height: 70px;
  margin-top: 33px;
}

.end .enter .item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.end .enter .enter-logo {
  display: inline-block;
  width: 50px;
  height: 45px;
  background: url(../img/foot_enter_sprite.png) no-repeat;
  background-size: 110px 552px;
}

.end .enter .item:nth-child(1) .enter-logo {
  background-position: -63px -456.5px;
}

.end .enter .item:nth-child(2) .enter-logo {
  background-position: -63px -101px;
}

.end .enter .item:nth-child(3) .enter-logo {
  background-position: 0 0;
}

.end .enter .item:nth-child(4) .enter-logo {
  background-position: -60px -50px;
}

.end .enter .item:nth-child(5) .enter-logo {
  background-position: 0 -101px;
}

.end .enter .amped {
  display: inline-block;
  width: 52px;
  height: 14px;
  margin-top: 5px;
  background: url(../img/foot_enter_tt.png) no-repeat;
  background-size: 180px 139px;
}

.end .enter .item:nth-child(1) .amped {
  width: 72px;
  background-position: 0 -108px;
}

.end .enter .item:nth-child(2) .amped {
  background-position: -1px -91px;
}

.end .enter .item:nth-child(3) .amped {
  background-position: 0 0;
}

.end .enter .item:nth-child(4) .amped {
  background-position: 0 -54px;
}

.end .enter .item:nth-child(5) .amped {
  background-position: -1px -72px;
}